  <!-- 社区空间 -->
<template>
  <div v-if="dynamic" class="dynamic">
    <div class="dynamic_div">
      社区空间
      <span style="float:right;" @click="getMore">换一批</span>
    </div>
    <ul class="dynamic_ul" v-for="(item,index) in dynamic" :key="index" @click="goDetail(item.id)">
      <div class="dynamic_ul_div" v-if="item.user">
        <img :src="item.user.avatar" alt />
        <div>{{item.user.username}}</div>
      </div>
      <div class="dynamic_ul_div2">
        <li class="title" style="white-space: pre-line;">{{item.content}}</li>
        <li class="valImg">
          <van-grid :border="false" :column-num="2">
            <van-grid-item
              v-for="(items,indexs)  in   item.imgList "
              :key="indexs"
              @click.stop="bigImg(index,indexs)"
            >
              <van-image style="width:100%;height:100%;" :src="items" />
            </van-grid-item>
          </van-grid>
        </li>

        <li class="date">{{item.tag}}:{{formatDateTime(item.createTime)}}</li>
      </div>
    </ul>
  </div>
</template>

<script>
import { ImagePreview, Toast } from 'vant'
import formatDateTime from '../../utils/data'

export default {
  components: {},
  data() {
    return {
      dynamic: [],
      current: 1, //记录第几页
      pages: 1,
    }
  },
  mounted() {
    this.init()
    console.log(this.dynamic)
  },
  methods: {
    formatDateTime(val) {
      console.log(val)
      return formatDateTime.formatDateTime5(val)
    },
    async init() {
      if (this.$store.getters.getUserInfo) {
        const res = await this.$axios.get(
          '/dynamic/list?current=' +
            this.current +
            '&userId=' +
            this.$store.getters.getUserInfo.id
        )
        if (res.data.code == 200) {
          this.dynamic = res.data.data.records
          this.pages = res.data.pages
          this.current = res.data.current
        }
      } else {
        const res = await this.$axios.get(
          '/dynamic/list?current=' + this.current
        )
        if (res.data.code == 200) {
          this.dynamic = res.data.data.records
          this.pages = res.data.pages
          this.current = res.data.current
        }
      }
    },
    // 大图
    bigImg(index, indexs) {
      ImagePreview({
        images: this.dynamic[index].imgList, // 预览图片的那个数组
        loop: false,
        closeable: true,
        startPosition: indexs, // 指明预览第几张图
      })
    },
    // 获取更多
    getMore() {
      if (this.current++ < this.pages) {
        this.current++
        this.init()
      } else {
        Toast('亲~没有更多了o(╥﹏╥)o')
      }
    },
    //
    goDetail(id) {
      this.$router.push('/shareLifeDetails/' + id)
    },
  },
}
</script>

<style scoped>
.dynamic {
  margin-top: 10px;
  margin-bottom: 1.5rem;
  padding: 5px 10px 5px 10px;
}
.dynamic_div {
  margin-bottom: 10px;
  position: relative;
  margin-right: 10px;
  box-sizing: border-box;
  font-size: 0.45rem;
}
.dynamic_div:before {
  display: block;
  height: 100%;
  width: 2px;
  content: ' ';
  background-color: #4378ff;
  position: absolute;
  /* top: 100; */
  left: -8px;
  transform: translate(50%, 0%);
}

.dynamic_ul {
  padding: 10px 0 10px 0;
  border-top: #eeeeee 1px solid;
  border-bottom: #dcdee0 1px dashed;
  /* display: flex; */
  flex-wrap: nowrap;
  box-sizing: border-box;
}
.dynamic_ul_div {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.dynamic_ul_div > img {
  width: 30px;
  height: 30px;
  border-radius: 5px;
}
.dynamic_ul_div > div {
  height: 30px;
  line-height: 30px;
  margin-left: 10px;
  align-items: center;
  font-size: 0.45rem;
}
.itemImg {
  display: flex;
  flex-wrap: wrap;
}
.itemImg > div {
  width: 33.33%;
  height: 100px;
  padding-left: 5px;
  padding-right: 5px;
  box-sizing: border-box;
}
.itemImg > div > img {
  height: 100%;
  width: 100%;
}
.title {
  width: 100%;
  font-size: 20px;
  /* 		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis; */
}
.date {
  font-size: 12px;
}
.dynamic_ul_div2 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.dynamic_ul_div2 > li {
  margin-top: 10px;
  font-size: 0.45rem;
}
</style>
